<template>

  <KModal
    :title="$tr('modalTitle')"
    size="small"
    :submitText="coreString('saveAction')"
    :cancelText="coreString('cancelAction')"
    :submitDisabled="submitting"
    @submit="updateName"
    @cancel="$emit('cancel')"
  >
    <KTextbox
      ref="name"
      v-model.trim="name"
      type="text"
      :label="coreString('classNameLabel')"
      :autofocus="true"
      :invalid="nameIsInvalid"
      :invalidText="nameIsInvalidText"
      :maxlength="50"
      @blur="nameBlurred = true"
    />
  </KModal>

</template>


<script>

  import { mapActions } from 'vuex';
  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';

  export default {
    name: 'ClassRenameModal',
    mixins: [commonCoreStrings],
    props: {
      classname: {
        type: String,
        required: true,
      },
      classid: {
        type: String,
        required: true,
      },
      classes: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        name: this.classname,
        nameBlurred: false,
        formSubmitted: false,
        submitting: false,
      };
    },
    computed: {
      duplicateName() {
        // if same name, different case
        if (this.name.toUpperCase() === this.classname.toUpperCase()) {
          return false;
        }
        const index = this.classes.findIndex(
          classroom => classroom.name.toUpperCase() === this.name.toUpperCase(),
        );
        if (index === -1) {
          return false;
        }
        return true;
      },
      nameIsInvalidText() {
        if (this.nameBlurred || this.formSubmitted) {
          if (this.name === '') {
            return this.coreString('requiredFieldError');
          }
          if (this.duplicateName) {
            return this.$tr('duplicateName');
          }
        }
        return '';
      },
      nameIsInvalid() {
        return Boolean(this.nameIsInvalidText);
      },
      formIsValid() {
        return !this.nameIsInvalid;
      },
    },
    methods: {
      ...mapActions('classEditManagement', ['updateClass']),
      async updateName() {
        this.formSubmitted = true;
        if (this.formIsValid) {
          try {
            this.submitting = true;
            await this.updateClass({ id: this.classid, updateData: { name: this.name } });

            const updatedClasses = this.classes.map(c => {
              if (c.id === this.classid) {
                return { ...c, name: this.name };
              }
              return c;
            });

            this.$store.commit('classManagement/SET_STATE', { classes: updatedClasses });
            this.$emit('success');
          } finally {
            this.submitting = false;
          }
        } else {
          this.$refs.name.focus();
        }
      },
    },
    $trs: {
      modalTitle: {
        message: 'Rename class',
        context:
          "Title of the 'Rename class' window, accessed via the 'Edit' option on the individual 'Class' page.",
      },
      duplicateName: {
        message: 'A class with that name already exists',
        context: 'Message that displays if user tries to give a class a name that already exists.',
      },
    },
  };

</script>


<style lang="scss" scoped></style>
